<template>
  <div class="record">
    <div class="scroll">
      <div class="line"></div>
      <div class="dotgroup" v-for="(item, index) in data" :key="index">
        <div class="left">
          <span class="time">{{ item.createTime }}</span>
        </div>
        <div class="dot"></div>
        <div class="right">
          <div class="text">
            <span v-if="item.name" style="margin-right: 35px">{{
              item.name
            }}</span>
            <span>{{ item.operateName }}</span>
          </div>
          <div
            v-if="
              item.changes && item.changes.length && item.isUpdate === 'change'
            "
            class="change"
          >
            <div v-for="(va, id) in item.changes" :key="id">
              <span>{{ va.label }}: </span>
              <span v-if="typeof va.oldValue === 'object'">
                <span v-for="(item, index) in va.oldValue" :key="index">
                  {{ item + " " }}
                </span>
              </span>
              <span v-else>{{ va.oldValue }}</span>
              <span v-if="va.oldValue && va.newValue"> --> </span>
              <span v-if="typeof va.newValue === 'object'">
                <span v-for="(item, index) in va.newValue" :key="index">
                  {{ item + " " }}
                </span>
              </span>
              <span v-else>{{ va.newValue }}</span>
            </div>
          </div>
          <div
            v-if="
              item.changes &&
              item.changes.length &&
              item.isUpdate === 'nochange'
            "
            class="change"
          >
            <div v-for="(it, idx) in item.value" :key="idx">
              <span>{{ it.label }}: </span>
              <span>{{ it.val }}</span>
            </div>
          </div>
          <div
            v-if="
              item.changes &&
              item.changes.length &&
              item.isUpdate === 'relation'
            "
          >
            <div v-for="(v, k) in item.changes" :key="k">
              <span>访客{{ v.newValue ? v.newValue : v.oldValue }}</span>
              <i v-show="v.oldValue" style="margin: 0 10px">≠</i>
              <i
                v-show="v.newValue"
                class="V7_iconfont V7_iconV7tubiao_guanlian"
                style="margin: 0 10px; font-size: 12px"
              ></i>
              <span>客户ID{{ item.customerId }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="!allShow" class="more" @click="handleMore">点击加载更多</div>
      <div v-else class="all">已经到底啦~</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import AudioProgress from '@/components/audio/AudioProgress.vue'
@Component({
  name: 'Record',
  components: {
    AudioProgress
  }
})
export default class Record extends Vue {
  @Prop({ default: () => [] }) private data
  @Prop({ default: () => false }) private allShow

  private handleMore () {
    this.$emit('loadMore')
  }
}
</script>

<style lang="stylus" scoped>
.record
  width 100%
  height calc(100% - 100px) !important
  overflow hidden
  padding 16px 0px
  .scroll
    height 100%
    position relative
    overflow auto
  .line
    width 10px
    background $c-main
    position absolute
    left 172px
    top 20px
    bottom 20px
  .dotgroup
    display flex
    color #686e84
    line-height 20px
    position relative
    margin-bottom 30px
    .left
      flex 0 0 150px
      text-align right
      .name
        color #303753
    .dot
      flex 0 0 5px
      background $c-main
      border-radius 50%
      width 5px
      height 5px
      margin 10px 20px
    .right
      flex auto
      .text
        font-size 12px
        font-weight 600
        color #303854
        margin-bottom 6px
        align-self baseline
        min-width 130px
    .operate
      position absolute
      top -4px
      right 10px
      color #686e84
      cursor pointer
      i
        font-size 12px
      &:hover
        color $c-main
  .more
    width 100%
    color #008BEE
    cursor pointer
    text-align center
  .all
    width 100%
    color #999
    text-align center
</style>
